@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700;800;900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
    /* Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .no-scrollbar {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }
}

html,
body,
#app {
    font-family: 'Montserrat', sans-serif;
	outline: 1px solid transparent;
	-webkit-backface-visibility: hidden;
	transform: translateZ(0);
	will-change: transform;
	-webkit-perspective: 1000;
}

.status-indicator {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 48px
}

.status-indicator .circle {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 12px;
    height: 12px;
    border-radius: 100px
}

.status-indicator--xl {
    width: 72px;
    height: 72px
}

.status-indicator--xl .circle {
    position: absolute;
    top: 27px;
    left: 27px;
    width: 18px;
    height: 18px;
    border-radius: 100px
}

.status-indicator .circle.circle--animated {
    animation-iteration-count: infinite;
    animation-delay: 1s;
    animation-fill-mode: backwards;
    animation-duration: 4s;
    animation-timing-function: linear
}

.status-indicator .circle-main {
    z-index: 3;
    background: #000
}

.status-indicator .circle-main.circle--animated {
    animation-name: pulsate-main-infinite
}

.status-indicator .circle-secondary {
    z-index: 2;
    background: rgba(0, 0, 0, .1)
}

.status-indicator .circle-secondary.circle--animated {
    animation-name: pulsate-secondary-infinite
}

.status-indicator .circle-tertiary {
    z-index: 1;
    background: rgba(0, 0, 0, .6);
    opacity: 1
}

.status-indicator .circle-tertiary.circle--animated {
    animation-name: pulsate-tertiary
}

.status-indicator--infinite .circle.circle--animated {
    animation-iteration-count: infinite
}

.status-indicator--success .circle-main {
	@apply bg-black
}

.status-indicator--success .circle-secondary {
	@apply bg-black bg-opacity-10
}

.status-indicator--success .circle-tertiary {
	@apply bg-black bg-opacity-40
}

@keyframes pulsate-tertiary {
    45% {
        transform: scale(1, 1)
    }
    80% {
        transform: scale(3, 3);
        opacity: 0
    }
    100% {
        transform: scale(3, 3);
        opacity: 0
    }
}

@keyframes pulsate-main-infinite {
    20% {
        transform: scale(1, 1)
    }
    45% {
        transform: scale(1.2, 1.2)
    }
    55% {
        transform: scale(1.2, 1.2)
    }
    80% {
        transform: scale(1, 1)
    }
}

@keyframes pulsate-secondary-infinite {
    10% {
        transform: scale(1, 1)
    }
    25% {
        transform: scale(1, 1)
    }
    50% {
        transform: scale(3, 3)
    }
    75% {
        transform: scale(3, 3)
    }
    100% {
        transform: scale(1, 1)
    }
}

.btn {
	@apply h-12 min-h-12 cursor-pointer rounded-xl font-medium px-4 inline-flex justify-center items-center gap-2 hover:bg-gray-500 hover:bg-opacity-10
}

.checkbox {
    flex-shrink: 0;
    --chkbg: var(--fallback-bc, oklch(var(--bc) / 1));
    --chkfg: var(--fallback-b1, oklch(var(--b1) / 1));
    height: 1.5rem;
    width: 1.5rem;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--rounded-btn, 0.5rem);
    border-width: 1px;
    border-color: var(--fallback-bc, oklch(var(--bc) / var(--tw-border-opacity)));
    --tw-border-opacity: .2;
}

.checkbox:checked, .checkbox[checked=true], .checkbox[aria-checked=true] {
    background-repeat: no-repeat;
    animation: checkmark var(--animation-input, .2s) ease-out;
    background-color: #bbf7d0;
    background-image: linear-gradient(-45deg, transparent 65%, #bbf7d0 65.99%), linear-gradient(45deg, transparent 75%, #bbf7d0 75.99%), linear-gradient(-45deg, #bbf7d0 40%, transparent 40.99%), linear-gradient(45deg, #bbf7d0 30%, black 30.99%, black 40%, transparent 40.99%), linear-gradient(-45deg, black 50%, #bbf7d0 50.99%);
}

.checkbox:checked, .checkbox[checked=true], .checkbox[aria-checked=true] {
	@apply bg-green-200 border-green-200 text-black;
}

.circular-progress {
	--size: 250px;
	--half-size: calc(var(--size) / 2);
	--stroke-width: 12px;
	--radius: calc((var(--size) - var(--stroke-width)) / 2);
	--circumference: calc(var(--radius) * pi * 2);
	--dash: calc((var(--progress) * var(--circumference)) / 100);
}

.circular-progress circle {
	cx: var(--half-size);
	cy: var(--half-size);
	r: var(--radius);
	stroke-width: var(--stroke-width);
	fill: none;
	stroke-linecap: round;
}

.circular-progress circle.bg {
  	stroke: #ddd;
}

.circular-progress circle.fg {
	transform: rotate(-90deg);
	transform-origin: var(--half-size) var(--half-size);
	stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
	transition: stroke-dasharray 0.3s linear 0s;

	@apply stroke-black
}

.error circle.bg, .error circle.fg {
    @apply !stroke-red-400
}